

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>Why Vue.js doesn't support templateURL — Netinfo.Vue.js</title>
    <meta charset="utf-8">
    <meta name="description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="alternate" hreflang="x-default" href="https://vuejs.org/2015/10/28/why-no-template-url/">
    <link rel="alternate" hreflang="zh" href="https://cn.vuejs.org/2015/10/28/why-no-template-url/">
    <link rel="alternate" hreflang="ja" href="https://jp.vuejs.org/2015/10/28/why-no-template-url/">
    <link rel="alternate" hreflang="ru" href="https://ru.vuejs.org/2015/10/28/why-no-template-url/">
    <link rel="alternate" hreflang="ko" href="https://kr.vuejs.org/2015/10/28/why-no-template-url/">
    <link rel="alternate" hreflang="pt-BR" href="https://br.vuejs.org/2015/10/28/why-no-template-url/">
    <link rel="alternate" hreflang="fr" href="https://fr.vuejs.org/2015/10/28/why-no-template-url/">

    <meta property="og:type" content="article">
    <meta property="og:title" content="Why Vue.js doesn't support templateURL — Vue.js">
    <meta property="og:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta property="og:image" content="https://cn.vuejs.org//netinfofe/images/logo.png">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Why Vue.js doesn't support templateURL — Vue.js">
    <meta name="twitter:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="twitter:image" content="https://cn.vuejs.org/images/logo.png">

    <link rel="apple-touch-icon" sizes="57x57" href="/netinfofe/images/icons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/netinfofe/images/icons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/netinfofe/images/icons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/netinfofe/images/icons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/netinfofe/images/icons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/netinfofe/images/icons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/netinfofe/images/icons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/netinfofe/images/icons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/netinfofe/images/icons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/netinfofe/images/icons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/netinfofe/images/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/netinfofe/images/icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/netinfofe/images/icons/favicon-16x16.png">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <link rel="icon" href="/netinfofe/images/logo.png" type="image/png">

    <meta name="msapplication-TileColor" content="#4fc08d">
    <meta name="theme-color" content="#4fc08d">

    <meta name="msapplication-config" content="browserconfig.xml">
    <link rel="manifest" href="/manifest.json">

    <!-- <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->
    <!-- <link href='//fonts.googleapis.com/css?family=Dosis:500&text=Vue.js' rel='stylesheet' type='text/css'> -->

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- main page styles -->
    <link rel="stylesheet" href="/netinfofe/css/page.css">

    <!-- this needs to be loaded before guide's inline scripts -->
    <script src="/netinfofe/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      Vue.config.productionTip = true
      window.PAGE_TYPE = ""
    </script>

    <!-- ga -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-46852172-3', 'cn.vuejs.org');
      ga('send', 'pageview');
    </script>
  </head>
  <body class="docs">
    <div id="mobile-bar" >
      <a class="menu-button"></a>
      <a class="logo" href="/"></a>
    </div>
    <div id="header">
  <a id="logo" href="/netinfofe/">
    <img src="/netinfofe/images/logo.png" alt="vue logo">
    <span>Netinfo.Vue.js</span>
  </a>
  <ul id="nav">
    <li>
  <!--<form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input">
  </form>-->
</li>
<!--<li class="nav-dropdown-container learn">
  <a class="nav-link">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/netinfofe/v2/guide/" class="nav-link">教程</a></li>
      <li><a href="/netinfofe/v2/api/" class="nav-link">API</a></li>
      <li><a href="/netinfofe/v2/style-guide/" class="nav-link">风格指南</a></li>
      <li><a href="/netinfofe/v2/examples/" class="nav-link">示例</a></li>
      <li><a href="/netinfofe/v2/cookbook/" class="nav-link">Cookbook</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank">聊天室</a></li>
      <li><a href="https://www.vuemeetups.org/" class="nav-link" target="_blank">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/" class="nav-link" target="_blank">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org" class="nav-link" target="_blank">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
      <li><a href="https://ssr.vuejs.org/" class="nav-link" target="_blank">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org" class="nav-link" target="_blank">周刊</a></li>
      <li><a href="https://github.com/vuejs/roadmap" class="nav-link" target="_blank">Roadmap</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">工作</a></li>
    </ul></li>
    <li><h4>资源列表</h4></li>
    <li><ul>
      <li><a href="https://github.com/vuejs" class="nav-link" target="_blank">官方仓库</a></li>
      <li><a href="https://curated.vuejs.org/" class="nav-link" target="_blank">Vue 优选</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Vue 资源</a></li>
    </ul></li>
  </ul>
</li>
-->

<!--<li class="nav-dropdown-container support-vue">
  <a href="/support-vuejs/" class="nav-link">支持 Vue</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/support-vuejs/#One-time-Donations" class="nav-link">一次性赞助</a></li>
      <li><a href="/support-vuejs/#Recurring-Pledges" class="nav-link">周期性赞助</a></li>
      <li><a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" class="nav-link">贴纸</a></li>
      <li><a href="https://vue.threadless.com" target="_blank" class="nav-link">T 恤商店</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">English</a></li>
    <li><a href="https://jp.vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">日本語</a></li>
    <li><a href="https://ru.vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">Русский</a></li>
    <li><a href="https://kr.vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">한국어</a></li>
    <li><a href="https://br.vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">Português</a></li>
    <li><a href="https://fr.vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">Français</a></li>
    <li><a href="https://vi.vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">Tiếng Việt</a></li>
  </ul>
</li>
-->
<!--<li><a href="https://github.com/vuejs/cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>-->

<li><a href="/netinfofe/v2/guide/" class="nav-link">教程</a></li>
<li><a href="/netinfofe/v2/components/" class="nav-link">组件</a></li>
<li><a href="/netinfofe/v2/api/" class="nav-link">API</a></li>
<li><a href="/netinfofe/v2/style-guide/" class="nav-link">风格指南</a></li>
<li><a href="/netinfofe/v2/examples/" class="nav-link">示例</a></li>
<li><a href="/netinfofe/v2/cookbook/" class="nav-link">Cookbook</a></li>


<li>
  <a href="/netinfofe/v2/aboutus/" class="nav-link team">关于我们</a>
</li>

  </ul>
</div>

    
      <div id="main" class="fix-sidebar">
        
          <div class="sidebar blog">
  <div class="sidebar-inner">
    <ul class="main-menu">
      <li>
  <!--<form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input">
  </form>-->
</li>
<!--<li class="nav-dropdown-container learn">
  <a class="nav-link">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/netinfofe/v2/guide/" class="nav-link">教程</a></li>
      <li><a href="/netinfofe/v2/api/" class="nav-link">API</a></li>
      <li><a href="/netinfofe/v2/style-guide/" class="nav-link">风格指南</a></li>
      <li><a href="/netinfofe/v2/examples/" class="nav-link">示例</a></li>
      <li><a href="/netinfofe/v2/cookbook/" class="nav-link">Cookbook</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank">聊天室</a></li>
      <li><a href="https://www.vuemeetups.org/" class="nav-link" target="_blank">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/" class="nav-link" target="_blank">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org" class="nav-link" target="_blank">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
      <li><a href="https://ssr.vuejs.org/" class="nav-link" target="_blank">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org" class="nav-link" target="_blank">周刊</a></li>
      <li><a href="https://github.com/vuejs/roadmap" class="nav-link" target="_blank">Roadmap</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">工作</a></li>
    </ul></li>
    <li><h4>资源列表</h4></li>
    <li><ul>
      <li><a href="https://github.com/vuejs" class="nav-link" target="_blank">官方仓库</a></li>
      <li><a href="https://curated.vuejs.org/" class="nav-link" target="_blank">Vue 优选</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Vue 资源</a></li>
    </ul></li>
  </ul>
</li>
-->

<!--<li class="nav-dropdown-container support-vue">
  <a href="/support-vuejs/" class="nav-link">支持 Vue</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/support-vuejs/#One-time-Donations" class="nav-link">一次性赞助</a></li>
      <li><a href="/support-vuejs/#Recurring-Pledges" class="nav-link">周期性赞助</a></li>
      <li><a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" class="nav-link">贴纸</a></li>
      <li><a href="https://vue.threadless.com" target="_blank" class="nav-link">T 恤商店</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">English</a></li>
    <li><a href="https://jp.vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">日本語</a></li>
    <li><a href="https://ru.vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">Русский</a></li>
    <li><a href="https://kr.vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">한국어</a></li>
    <li><a href="https://br.vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">Português</a></li>
    <li><a href="https://fr.vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">Français</a></li>
    <li><a href="https://vi.vuejs.org/2015/10/28/why-no-template-url/" class="nav-link" target="_blank">Tiếng Việt</a></li>
  </ul>
</li>
-->
<!--<li><a href="https://github.com/vuejs/cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>-->

<li><a href="/netinfofe/v2/guide/" class="nav-link">教程</a></li>
<li><a href="/netinfofe/v2/components/" class="nav-link">组件</a></li>
<li><a href="/netinfofe/v2/api/" class="nav-link">API</a></li>
<li><a href="/netinfofe/v2/style-guide/" class="nav-link">风格指南</a></li>
<li><a href="/netinfofe/v2/examples/" class="nav-link">示例</a></li>
<li><a href="/netinfofe/v2/cookbook/" class="nav-link">Cookbook</a></li>


<li>
  <a href="/netinfofe/v2/aboutus/" class="nav-link team">关于我们</a>
</li>

    </ul>
    <div class="list">
      <h2>
        Recent Posts
        <a href="/netinfofe/atom.xml" target="_blank" style="vertical-align: middle; margin-left: 5px;">
          <img src="/netinfofe/images/feed.png" style="width: 15px; height: 15px;">
        </a>
      </h2>
      <ul style="padding: 0;">
      
        <li>
          <a href="/2016/04/27/announcing-2.0/" class="sidebar-link">Announcing Vue.js 2.0</a>
        </li>
      
        <li>
          <a href="/2016/03/14/march-update/" class="sidebar-link">March 2016 Update</a>
        </li>
      
        <li>
          <a href="/2016/02/06/common-gotchas/" class="sidebar-link">Common Beginner Gotchas</a>
        </li>
      
        <li>
          <a href="/2015/12/28/vue-cli/" class="sidebar-link">Announcing vue-cli</a>
        </li>
      
        <li>
          <a href="/2015/10/28/why-no-template-url/" class="sidebar-link current">Why Vue.js doesn't support templateURL</a>
        </li>
      
        <li>
          <a href="/2015/10/26/1.0.0-release/" class="sidebar-link">Vue.js 1.0.0 Released</a>
        </li>
      
        <li>
          <a href="/2015/06/11/012-release/" class="sidebar-link">Vue.js 0.12 released!</a>
        </li>
      
        <li>
          <a href="/2014/12/08/011-component/" class="sidebar-link">0.11 Component Tips</a>
        </li>
      
        <li>
          <a href="/2014/11/09/vue-011-release/" class="sidebar-link">Vue.js 0.11 released!</a>
        </li>
      
        <li>
          <a href="/2014/07/29/vue-next/" class="sidebar-link">Vue.js 0.10.6, and what's next</a>
        </li>
      
      </ul>
    </div>
  </div>
</div>
<div class="content with-sidebar blog post">
  <div id="ad">
  <!--<a href="https://time.geekbang.org/column/intro/81?utm_source=website&utm_medium=vue&utm_campaign=81-onsell&utm_content=201805banner" target="_blank" rel="nofollow">
    <img src="/images/geekbang5.gif" alt="极客时间">
  </a>-->
</div>

  <h1>Why Vue.js doesn't support templateURL</h1>
  <h4>Oct 28, 2015</h4>
  <p>A very common question from new Vue users, especially those who used Angular before, is “can I have <code>templateURL</code>?”. I have answered this so many times and I figure it’s better to write something about it.</p>
<a id="more"></a>
<p>In Angular, <code>templateURL</code> or <code>ng-include</code> allows the user to dynamically load a remote template file at runtime. This seems pretty convenient as a built-in feature, but let’s rethink what problem it solves.</p>
<p>First, it allows us to write our template in a separate HTML file. This gives us proper syntax highlighting in editors, which is probably why many prefer to do so. But is splitting your JavaScript code and the template really the best way? For a Vue.js component, its template and its JavaScript is tightly coupled by nature - it’s in fact much simpler if things are just in the same file. The context switching of jumping back and forth between two files actually makes the development experience much worse. Conceptually, components are the basic building block of a Vue.js app, not templates. Every Vue.js template is coupled to an accompanying JavaScript context - there’s no point in splitting them further apart.</p>
<p>Second, because <code>templateURL</code> loads the template via Ajax at runtime, you don’t need a build step in order to split up your files. This is convenient during development, but comes at a serious cost when you want to deploy it to production. Before HTTP/2 is universally supported, the number of HTTP requests is still probably the most critical factor in your app’s initial load performance. Now imagine you use <code>templateURL</code> for every component in your app - the browser needs to perform dozens of HTTP requests before even being able to display anything! In case you don’t know, most browsers limit the number of parallel requests it can perform to a single server. When you exceed that limit, your app’s initial rendering will suffer for every extra round trip the browser has to wait for. Sure, there are build tools that can help you pre-register all those templates in <code>$templateCache</code> - but that shows us a build step is, in fact, inevitable for any serious frontend development.</p>
<p>So, without <code>templateURL</code>, how do we deal with the development experience problem? Writing templates as inline JavaScript strings is terrible, faking templates with <code>&lt;script type=&quot;x/template&quot;&gt;</code> also feels like a hack. Well, maybe it’s time to up the game a bit and use a proper module bundler like <a href="http://webpack.github.io/" target="_blank" rel="noopener">Webpack</a> or <a href="http://browserify.org/" target="_blank" rel="noopener">Browserify</a>. It might seem daunting if you’ve never dealt with them before, but trust me it’s worth it to take the leap. Proper modularization is a necessity if you want to build anything large and maintainable. More importantly, you get to write your <a href="http://vuejs.org/guide/single-file-components.html" target="_blank" rel="noopener">Vue components in a single file</a>, with proper syntax highlighting and the extra benefits of custom pre-processors, hot-reloading, ES2015 by default, autoprefixing and scoped CSS, which makes the development experience 10 times better.</p>
<p>Finally, Vue does allow you to <a href="http://vuejs.org/guide/components.html#Async-Components" target="_blank" rel="noopener">lazy load your components</a>, and with Webpack it is trivially easy. Although this is only a concern when your initial bundle is so large that you are better off splitting it apart.</p>
<p>Think in components, not templates.</p>

</div>

        
      </div>
      <script src="/netinfofe/js/smooth-scroll.min.js"></script>
    

    <!-- main custom script for sidebars, version selects etc. -->
    <script src="/netinfofe/js/css.escape.js"></script>
    <script src="/netinfofe/js/common.js"></script>

    <!-- search -->
    <link href="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/netinfofe/css/search.css">
    <script src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
    <script>
    [
      '#search-query-nav',
      '#search-query-sidebar',
      '#search-query-menu'
    ].forEach(function (selector) {
      if (!document.querySelector(selector)) return
      // search index defaults to v2
      var match = window.location.pathname.match(/^\/(v\d+)/)
      var version = match ? match[1] : 'v2'
      docsearch({
      appId: 'BH4D9OD16A',
      apiKey: '5638280abff9d207417bb03be05f0b25',
      indexName: 'vuejs_cn2',
      inputSelector: selector,
      algoliaOptions: { facetFilters: ["version:" + version] }
      })
    })
    </script>

    <!-- fastclick -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body)
    }, false)
    </script>
  </body>
</html>
